<template>
  <div class="list-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <nav class="nav-container">
        <div class="nav-left">
          <button class="back-btn" @click="goBack">
            <span class="back-icon">←</span>
            返回
          </button>
          <h1 class="page-title">赛事列表</h1>
        </div>
      </nav>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <div class="list-wrapper" v-if="!loading">
        <div v-if="eventsList.length === 0" class="empty-state">
          <div class="empty-icon">📋</div>
          <p class="empty-text">暂无赛事信息</p>
        </div>
        
        <div v-else class="items-grid">
          <div 
            v-for="event in eventsList" 
            :key="event.id" 
            class="list-item"
            @click="handleItemClick(event)"
          >
            <div class="item-header">
              <h3 class="item-title">{{ event.title }}</h3>
              <span class="item-date">{{ formatDate(event.publishTime) }}</span>
            </div>
            
            <div class="item-content">
              <p class="item-summary">{{ event.summary || event.content }}</p>
            </div>
            
            <div class="item-footer">
              <span class="item-type">赛事</span>
              <span class="item-status" :class="getStatusClass(event.viewCount)">
                {{ getStatusText(event.viewCount) }}浏览
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAllEventsService } from '@/api/home.js'

const router = useRouter()
const eventsList = ref([])
const loading = ref(true)

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 获取状态样式类
const getStatusClass = (status) => {
  switch (status) {
    case 'active':
    case '进行中':
      return 'status-active'
    case 'upcoming':
    case '即将开始':
      return 'status-upcoming'
    case 'ended':
    case '已结束':
      return 'status-ended'
    default:
      return 'status-default'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'active':
      return '进行中'
    case 'upcoming':
      return '即将开始'
    case 'ended':
      return '已结束'
    default:
      return status || '未知状态'
  }
}

// 点击项目
const handleItemClick = (event) => {
  router.push(`/event-detail/${event.id}`)
}

// 加载赛事列表
const loadEventsList = async () => {
  try {
    loading.value = true
    const result = await getAllEventsService()
    if (result.code === 200 && result.data) {
      // 后端返回的是分页数据，需要取list字段
      eventsList.value = result.data.list || []
    }
  } catch (error) {
    console.error('加载赛事列表失败:', error)
    eventsList.value = []
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadEventsList()
})
</script>

<style scoped lang="scss">
@import '@/assets/css/event-list.css';
</style>